import React, { useState } from 'react'

/*


1. 定义store
  a store/index.js：使用RTK的 configureStore 创建store，并添加reducer
  b store/modules/xx.js：使用createSlice定义各自的reduce
    1) 添加
      - 名称name
      - 初始数据initialState
      - reducer：reducers
    2) 导出
      - 单独解构导出store.action里的reduce
      - 默认导出：“slice reducer”
2. 根组件root, 使用Provider包裹，传入store
3. 使用
  - 准备
    - 导入useSelector：获取数据
    - 导入useDispatch：派发action
    - 导入上面【1-b-2)】store.action
  - 用：
     - let { personList } = useSelector(state => state.person)
     - let dispatch = useDispatch()
     - 派发action
        dispatch(addPerson({
          id: nanoid(),
          name: inpVal
        }))
     

*/


/*
 1. RTK：是这个插件@reduxjs/toolkit
 2. configureStore：封装了createStore，简化配置项，提供一些现成的默认配置项。它可以自动组合 slice 的 reducer，可以添加任何 Redux 中间件，默认情况下包含 redux-thunk，并开启了 Redux DevTools 扩展。
 3. createSlice() 接收一组 reducer 函数的对象，一个 slice 切片名和初始状态 initial state，并自动生成具有相应 action creator 和 action type 的 slice reducer。

  */ 


import { useSelector, useDispatch } from 'react-redux'
import { addPerson } from '@/store/modules/personStore.js'
import { nanoid } from 'nanoid'


export default function A010_ReactRedux() {

  let { personList } = useSelector(state => state.person)
  let dispatch = useDispatch()

  let [inpVal, setInpVal] = useState('')
  let add = () => {
    dispatch(addPerson({
      id: nanoid(),
      name: inpVal
    }))
  }
  return (
    <>
      <input value={inpVal} onChange={(ev) => { setInpVal(ev.target.value) }} ></input>
      <button onClick={add}>添加</button>

      <ul>
        {
          personList.map(item => {
            return (
              <li key={item.id}>姓名：{item.name}</li>
            )
          })
        }
      </ul>
    </>
  )
}
